<!-- 搜索表单 -->
<template>
  <div class="ces-form">
    <el-dialog
      :title="dialogFormTitle"
      :visible.sync="dialogFormVisible"
      @close="reset()"
      :close-on-click-modal="false"
      :width="dialogWidth"
      v-if="dialogFormVisible"
    >
      <el-form
        :size="size"
        :inline="inline"
        :label-width="labelWidth"
        :rules="formRules"
        :model="formData"
        ref="ruleForm"
      >
        <el-form-item
          v-if="item.isShow ? item.isShow(item) : true"
          v-for="item in formCols"
          :label="item.label"
          :key="item.label"
          :prop="item.prop"
        >
          <!-- 输入框 -->
          <el-input
            v-if="item.type === 'input'"
            :id="item.id || ''"
            v-model="formData[item.prop]"
            :size="size || item.size"
            :style="{ width: item.width + 'px' }"
            @change="item.change && item.change(formData[item.prop])"
            :placeholder="item.placeholder || '请输入'"
            :disabled="item.isDisabled && item.isDisabled(formData)"
            :type="item.inputType ? item.inputType : 'text'"
          >
          </el-input>
          <el-button
            v-if="(item.type === 'input' && item.inputButton) || false"
            type="primary"
            @click="item.inputButtonFn"
          >
            无限次
          </el-button>
          <!-- 只读
          <el-input
            v-if="item.type==='readonly'"
            :id="item.id||''"
            v-model="formData[item.prop]"
            :size="size || item.size"
            :style="{width:item.width+'px'}"
            :placeholder="item.placeholder || '请输入'"
            readonly="value"
          ></el-input> -->
          <!-- 按钮 -->
          <el-button
            v-if="item.type === 'button'"
            type="primary"
            :size="size || item.size"
            :style="{ width: item.width + 'px' }"
            @click="item.handle"
          >
            {{ formData[item.prop] }}
          </el-button>
          <!-- 文本域 -->
          <el-input
            v-if="item.type === 'textarea'"
            type="textarea"
            :rows="4"
            :size="size || item.size"
            :placeholder="item.placeholder || '请输入'"
            :style="{ width: item.width + 'px' }"
            :disabled="item.isDisabled && item.isDisabled(formData)"
            @change="item.change && item.change(formData[item.prop])"
            v-model="formData[item.prop]"
          >
          </el-input>
          <!-- 下拉框 -->
          <el-select
            clearable
            v-if="item.type === 'select'"
            v-model="formData[item.prop]"
            filterable
            :multiple="item.multiple"
            :size="size || item.size"
            :style="{ width: item.width + 'px' }"
            @change="item.change && item.change(formData[item.prop])"
            @visible-change="
              item.focus && item.focus($event, formData[item.prop])
            "
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          >
            <el-option
              v-for="op in item.options"
              :label="op.name ? op.name : op.label"
              :value="op.value"
              :key="op.value"
            ></el-option>
          </el-select>
          <!-- 级联省市区 -->
          <el-cascader
            v-if="item.type === 'cascader'"
            :style="{ width: item.width + 'px' }"
            :placeholder="item.placeholder || '请选择'"
            :options="cascaderOptions"
            v-model="formData[item.prop]"
            @focus="item.focus && item.focus(formData[item.prop])"
            filterable
            clearable
            :show-all-levels="item.showAll && item.showAll(formData[item.prop])"
            :props="{
              expandTrigger: 'hover',
              checkStrictly:
                item.checkStrictly && item.checkStrictly(formData[item.prop])
            }"
            @change="item.change && item.change(formData[item.prop])"
          ></el-cascader>
          <!-- 单选 -->
          <el-radio-group
            v-if="item.type === 'radio'"
            v-model="formData[item.prop]"
            :style="{ width: item.width + 'px' }"
            @change="item.change && item.change(formData[item.prop])"
            :size="size || item.size"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          >
            <el-radio
              v-for="ra in item.radios"
              :label="ra.value"
              :key="ra.value"
              >{{ ra.label }}
            </el-radio>
          </el-radio-group>
          <!-- 复选框 -->
          <el-checkbox-group
            v-if="item.type === 'checkbox'"
            v-model="formData[item.prop]"
            :style="{ width: item.width + 'px' }"
            @change="item.change && item.change(formData[item.prop])"
            :size="size || item.size"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          >
            <el-checkbox
              v-for="ch in item.checkboxs"
              :label="ch.value"
              :key="ch.value"
            >
              {{ ch.label }}</el-checkbox
            >
          </el-checkbox-group>
          <!-- 日期 -->
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="formData[item.prop]"
            :style="{ width: item.width + 'px' }"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="expireTimeOption"
            @change="item.change && item.change(formData[item.prop])"
            :size="size || item.size"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          >
          </el-date-picker>
          <el-date-picker
            v-if="item.type === 'datet'"
            v-model="formData[item.prop]"
            :style="{ width: item.width + 'px' }"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="expireTimeOption"
            @change="item.change && item.change(formData[item.prop])"
            :size="size || item.size"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          >
          </el-date-picker>
          <!-- 开始-结束日期 -->
          <el-date-picker
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-if="item.type === 'daterange'"
            type="daterange"
            v-model="formData[item.prop]"
            :style="{ width: item.width + 'px' }"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="expireTimeOption"
            @change="item.change && item.change(formData[item.prop])"
            :size="size || item.size"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          ></el-date-picker>
          <!-- 时间 -->
          <el-time-select
            v-if="item.type === 'time'"
            v-model="formData[item.prop]"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            :style="{ width: item.width + 'px' }"
            @change="item.change && item.change(formData[item.prop])"
            :size="size || item.size"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          ></el-time-select>
          <!-- 开始-结束时间 -->
          <el-time-picker
            v-if="item.type === 'timePicker'"
            v-model="formData[item.prop]"
            is-range
            format="HH:mm"
            value-format="HH:mm"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            :style="{ width: item.width + 'px' }"
            @change="item.change && item.change(formData[item.prop])"
            :size="size || item.size"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
            :picker-options="{
              selectableRange: ['00:00:00 - 23:59:59']
            }"
          ></el-time-picker>
          <!-- 日期时间 -->
          <el-date-picker
            v-if="item.type === 'dateTime'"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :style="{ width: item.width + 'px' }"
            v-model="formData[item.prop]"
            @change="item.change && item.change(formData[item.prop])"
            :size="size || item.size"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          ></el-date-picker>
          <!-- 计数器 -->
          <el-input-number
            v-if="item.type === 'number'"
            v-model="formData[item.prop]"
            controls-position="right"
            :style="{ width: item.width + 'px' }"
            @change="item.change && item.change(formData[item.prop])"
            :min="0"
            :max="100"
          />
          <!-- 滑块 -->
          <!-- <el-slider v-if="item.type==='Slider'" v-model="formData[item.prop]"></el-slider> -->
          <!-- 开关 -->
          <el-switch
            v-if="item.type === 'switch'"
            v-model="formData[item.prop]"
            :size="size || item.size"
            :active-value="item.values && item.values[0]"
            :inactive-value="item.values && item.values[1]"
            @change="item.change && item.change(formData[item.prop])"
            :style="{ width: item.width + 'px' }"
            :disabled="item.isDisabled && item.isDisabled(formData[item.prop])"
          ></el-switch>
          <!-- 树形菜单弹出框 -->
          <el-popover
            v-if="item.type === 'popover'"
            placement="bottom-start"
            width="200"
            ref="deptListPopover"
            trigger="click"
          >
            <el-tree
              :data="item.options"
              accordion
              node-key="id"
              ref="popoverTree"
              :props="defaultProps"
              :highlight-current="true"
              :expand-on-click-node="false"
              @node-click="item.handleNodeClick"
            />
            <el-input
              slot="reference"
              v-model="formData[item.prop]"
              :readonly="true"
              :style="{ width: item.width + 'px' }"
              :placeholder="item.placeholder || '请选择'"
            >
            </el-input>
          </el-popover>
          <!-- 树形控件 -->
          <el-tree
            v-if="item.type === 'tree'"
            :data="item.options"
            show-checkbox
            node-key="id"
            ref="tree"
            :props="defaultProps"
            :default-checked-keys="item.default_checked_keys"
            @check="item.check2"
            @check-change="item.check"
          />
          <!-- 图片上传 -->
          <section
            v-if="item.type === 'upload'"
            :style="{ width: item.width + 'px' }"
          >
            <el-upload
              v-loading="loading"
              class="avatar-uploader"
              :action="upload_url + '/common/upload'"
              :show-file-list="false"
              :on-success="item.success"
              :on-error="handleAvatarError"
              :on-progress="handleAvatarProgress"
              :before-upload="beforeAvatarUpload"
              :headers="headers"
              name="file"
            >
              <video
                v-if="formData[item.prop].search(/.mp4/i) != -1"
                style="text-align:center;width:200px;height:150px;"
                :src="formData[item.prop] | formatImg"
                controls
                autoplay
              ></video>
              <img
                v-if="
                  formData[item.prop] &&
                    formData[item.prop].search(/.mp4/i) == -1
                "
                :src="formData[item.prop] | formatImg"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </section>
          <!-- 多图片上传 -->
          <section
            v-if="item.type === 'uploadList'"
            :style="{ width: item.width + 'px' }"
          >
            <el-upload
              v-loading="loading"
              :action="upload_url + '/api/file/uploads'"
              list-type="picture-card"
              :multiple="true"
              :limit="9"
              :fileList="fileList"
              :on-success="handleAvatarSuccess"
              :on-error="handleAvatarError"
              :on-progress="handleAvatarProgress"
              :before-upload="beforeAvatarUpload"
              :on-remove="handleRemove"
              :on-exceed="handleExceed"
              :on-preview="handlePictureCardPreview"
              :headers="{ token: $cookie.get('token') }"
              name="files"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body title="预览"
              ><img width="100%" :src="dialogImageUrl" alt
            /></el-dialog>
          </section>
          <!-- 地图 -->
          <div
            v-if="item.type === 'map'"
            id="container"
            style="width:900px;height: 300px;"
          ></div>

          <!-- 默认 -->
          <span
            v-if="!item.type"
            :style="{ width: item.width + 'px', display: 'inline-block' }"
            :size="size"
            :class="item.itemClass && item.itemClass(formData[item.prop])"
          >
            {{
              (item.formatter && item.formatter(formData[item.prop])) ||
                formData[item.prop]
            }}
          </span>
          <!-- 图片显示 -->
          <el-image
            v-if="item.type === 'img'"
            :src="formData[item.prop] | formatImg"
            :style="{ width: item.width + 'px', height: item.width + 'px' }"
          ></el-image>
          <!-- 富文本  -->
          <r-tinymce
            v-if="item.type === 'tinymce'"
            v-model="formData[item.prop]"
            :height="300"
            :width="600"
          >
          </r-tinymce>
          <!-- <Tinymce v-if="item.type === 'tinymce'" :tinymceId="item.prop"
            v-model="formData[item.prop]" :height="300" :width="600"></Tinymce> -->
          <i v-if="item.remark && !item.rmblock">{{ item.remark }}</i>
          <div v-if="item.remark && item.rmblock">{{ item.remark }}</div>
          <slot v-if="item.type === 'slot'" :name="item.name"></slot>
        </el-form-item>
        <slot></slot>
      </el-form>
      <el-form
        inline
        v-if="isHandle"
        :style="
          btnStyle || 'justify-content: flex-end;display: flex;margin-top:20px;'
        "
      >
        <el-form-item
          v-for="item in formHandle"
          :key="item.label"
          style="margin-bottom: 0;"
        >
          <el-button
            v-if="item.theme === undefined"
            :type="item.type"
            :size="item.size || size"
            :icon="item.icon"
            @click="item.handle"
            >{{ item.label }}</el-button
          >
          <div v-if="item.theme === 'upload'">
            <input
              v-show="false"
              ref="excel-upload-input"
              class="excel-upload-input"
              type="file"
              accept=".xlsx, .xls"
              @change="handleClick"
            />
            <el-button
              :loading="item.loading"
              :size="item.size || size"
              type="success"
              icon="el-icon-upload2"
              @click="handleUpload"
              >{{ item.label }}</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import area from "@/utils/area2";
import * as plugin from "@/utils/Tmap";
// import Tinymce from "@/components/Tinymce/index.vue";
export default {
  components: {
    // Tinymce
  },
  props: {
    isHandle: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: "100px"
    },
    dialogWidth: {
      type: String,
      default: "1000px"
    },
    inline: {
      type: Boolean,
      default: true
    },
    // 搜索框型号：mini,medium,small
    size: {
      type: String,
      default: "small"
    },
    formCols: {
      type: Array,
      default: () => []
    },
    formHandle: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => {}
    },
    formRules: {
      type: Object,
      default: () => {}
    },
    btnStyle: {
      type: String,
      default: ""
    },
    fileList: {
      type: Array,
      default: () => []
    },
    defaultProps: {
      type: Object,
      default: () => ({ children: "children", label: "text" })
    },
    destroy: {
      type: Boolean,
      default: true
    }
  },
  name: "Form",
  data() {
    return {
      dialogFormVisible: false,
      dialogFormTitle: "新增",
      loading: false,
      imageUrl: "",
      upload_url: process.env.VUE_APP_URL,
      imgurl: process.env.VUE_APP_IMG,
      cascaderOptions: area,
      map: null,
      expireTimeOption: {
        disabledDate(date) {
          return date.getTime() < Date.now() - 8.64e7;
        }
      },
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  computed: {
    headers() {
      return {
        // Authorization:sessionStorage.token
      };
    }
  },
  created() {},
  mounted() {
    console.log(" this.$refs.ruleForm---", this.$refs.ruleForm);
    // this.plugin()
  },
  methods: {
    async plugin(point = { lat: "", lng: "" }) {
      var qq = await plugin.Tmap();
      if (point.lat == "" || point.lat == 0) {
        point = await this.getLocation();
      }
      this.map = await plugin.center(point.lat, point.lng);
      qq.maps.event.addListener(this.map.marker, "dragend", e => {
        this.map.map.setCenter(e.latLng);
        this.$emit("position", {
          lat: e.latLng.lat,
          lng: e.latLng.lng
        });
      });
    },
    getLocation() {
      //腾讯api
      return new Promise((resolve, reject) => {
        this.$jsonp("https://apis.map.qq.com/ws/location/v1/ip", {
          key: "N6RBZ-AJN35-AACI2-Q2ICF-HYV6O-JRBBZ",
          output: "jsonp"
        }).then(res => {
          resolve({
            lat: res.result.location.lat,
            lng: res.result.location.lng
          });
        });
      });
    },
    handleAvatarSuccess(res, file) {
      this.loading = false;
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success"
        });
        this.$emit("imgs", res.data.value);
      } else {
        this.$message({
          message: res.msg,
          type: "error"
        });
      }
    },
    reset() {
      this.$refs.ruleForm.resetFields();
      this.$parent.$data.formData = this.$parent.$options.data.call(
        this
      ).formData;
      if (this.$parent.$data.formTable) {
        this.$parent.$data.formTable.data = this.$parent.$options.data.call(
          this
        ).formTable.data;
      }
    },
    handleAvatarError() {
      this.loading = false;
      this.$message.error("上传失败");
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg" || "image/png";
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "video/mp4";
      const isLt5M = file.size / 1024 / 1024 < 5000;
      if (!isJPG) {
        // this.$message.error("上传格式只能是图片格式!");
        this.$message.error("上传文件只能是 JPG/png/mp4 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5000MB!");
      }
      return isJPG && isLt5M;
    },
    handleAvatarProgress(res, file) {
      this.loading = true;
    },
    handleRemove(file, fileList) {
      let list = fileList.map(item => {
        console.log(item);
        if (item.url.indexOf("http") != -1) {
          return item.url.split(process.env.VUE_APP_IMG)[1];
        } else {
          return item.url;
        }
      });
      this.$emit("imgs", {
        type: "pictureCard",
        url: list
      });
    },
    handleExceed() {
      this.$message({
        message: "最多上传9张图片",
        type: "warning"
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleClick(e) {
      const files = e.target.files;
      const rawFile = files[0]; // only use files[0]
      if (!rawFile) return;
      this.upload(rawFile);
    },
    handleUpload() {
      this.$refs["excel-upload-input"][0].click();
    },
    upload(rawFile) {
      this.$refs["excel-upload-input"][0].value = null; // fix can't select the same excel
      const before = this.beforeUpload(rawFile);
      if (before) {
        let formData = new FormData();
        formData.append("file", rawFile);
        this.$http.upload("/sys/icInfo/importExcelIc", formData).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "上传成功"
            });
          }
        });
      }
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "小于1兆",
        type: "warning"
      });
      return false;
    }
  }
};
</script>
<style scoped lang="scss">
.avatar-uploader,
.el-upload {
  border: 1px dashed #ccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  display: block;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
